<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>登陆帐号</template>
            <template v-slot:right></template>
        </nav-bar>
        <div class="reg">
            <van-image
            width="100"
            height="100"
            lazy-load
            :src="imgsrc"
            />

            <van-form @submit="onSubmit" >
                <van-cell-group inset>
                    <van-field
                    v-model="email"
                    name="邮箱"
                    label="邮箱"
                    placeholder="邮箱"
                    :rules="[{ required: true, message: '请填写用邮箱' }]"
                    />
                    <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />

                </van-cell-group>
                <div style="margin: 16px;">
                    <div class="link-login" @click="$router.push({path:'/reg'})">
                        没有帐号，马上注册
                    </div>
                    <van-button round block type="primary" color="var(--color-tint)" native-type="submit">
                    提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { reactive,toRefs,onMounted } from 'vue';
import { login } from 'network/user';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import { useStore} from 'vuex';

export default {
    name:"Login",
    components:{
        NavBar
    },
    data(){
        return{
            imgsrc:require('assets/logo.png')
        }
    },
    setup() {
        const router = useRouter();
        const store = useStore();
        const userinfo = reactive({
            email:'',
            password:''
        })

        const onSubmit = ()=>{
            login(userinfo).then(res=>{
                //如果登陆成功，将token保存到本地 window.localStorage  setItem(key,value)   getItem(key)
                window.localStorage.setItem('token',res.access_token);
                // console.log(res.access_token);

                //在vuex 状态管理isLogin
                store.commit('setIsLogin','true');
      
                Toast.success('登陆成功');
                router.go(-1);
                userinfo.email = '';
                userinfo.password = '';  
                
                setTimeout(()=>{
                    // location.reload();
                    store.dispatch('updateCart');
                },2000)            


            })
        }
        onMounted(()=>{
             console.log(store.state.user.isLogin,'###');
                if(store.state.user.isLogin == 'true'){
                    setTimeout(()=>{
                    router.push({path:'/about'});
                    },500)
                    
                }
         })

        return{
            ...toRefs(userinfo),
            onSubmit
        }
    },
}
</script>

<style scoped>
.reg{
    margin-top: 150px;
}
.link-login{
    font-size: 18px;
    color: blueviolet;
    margin-bottom: 30px;
}
</style>